<template>
  <div class="dhcc-body">
    <el-row :gutter="10">
      <el-col :span="6">
        <div class="dhcc-search">
          <el-form
            ref="orgSearchForm"
            :model="orgMap"
            class="demo-form-inline"
            size="mini"
            :inline="true"
          >
            <el-form-item prop="orgName">
              <el-input
                v-model="orgMap.orgName"
                placeholder="机构名称"
              ></el-input>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="fetchData" icon="el-icon-search"
                >查询</el-button
              >
            </el-form-item>
          </el-form>
        </div>
        <div class="dhcc-main">
          <!-- 表格数据 -->
          <el-table
            :data="orgList"
            height="550"
            border
            style="width: 100%"
            highlight-current-row
            @current-change="changOrgRows"
            size="mini"
          >
            <el-table-column
              prop="orgKey"
              label="机构代码"
              width="80"
            ></el-table-column>
            <el-table-column prop="orgName" label="机构名称"></el-table-column>
          </el-table>
          <el-pagination
            @size-change="orgHandleSizeChange"
            @current-change="orgHandleCurrentChange"
            :current-page="orgCurrentPage"
            :page-sizes="[10, 20, 50]"
            :page-size="orgPageSize"
            layout="total, sizes, prev, next"
            :total="orgTotal"
            style="margin-top: 10px"
          ></el-pagination>
        </div>
      </el-col>
      <el-col :span="18">
        <div class="dhcc-search">
          <!-- 检索区 -->
          <el-form
            ref="searchForm"
            :model="roleMap"
            class="demo-form-inline"
            size="mini"
            :inline="true"
          >
            <el-form-item prop="roleName">
              <el-input
                v-model="roleMap.roleName"
                placeholder="角色名称"
              ></el-input>
            </el-form-item>
            <el-form-item>
              <el-button
                type="primary"
                @click="selectRoleData"
                icon="el-icon-search"
                >查询</el-button
              >
              <el-button type="primary" @click="handleAdd" icon="el-icon-plus"
                >新建</el-button
              >
              <el-button @click="resetForm('searchForm')" icon="el-icon-refresh"
                >重置</el-button
              >
            </el-form-item>
          </el-form>
        </div>
        <div class="dhcc-main">
          <!-- 表格数据 -->
          <el-table
            :data="list"
            highlight-current-row
            height="550"
            border
            style="width: 100%"
            size="mini"
          >
            <el-table-column
              type="index"
              label="序号"
              width="60"
            ></el-table-column>
            <el-table-column
              prop="roleName"
              label="角色名称"
              width="300"
            ></el-table-column>
            <el-table-column
              prop="seqNo"
              label="顺序号"
              width="100"
            ></el-table-column>
            <el-table-column prop="note" label="备注"></el-table-column>
            <el-table-column label="操作" width="250" align="center">
              <template slot-scope="scope">
                <el-button size="mini" @click="handleEdit(scope.row.roleKey)"
                  >编辑</el-button
                >
                <el-button
                  type="success"
                  size="mini"
                  @click="handlePagePath(scope.row.roleKey)"
                  >菜单</el-button
                >
                <el-button
                  size="mini"
                  type="danger"
                  @click="handleDele(scope.row.roleKey)"
                  >删除</el-button
                >
              </template>
            </el-table-column>
          </el-table>
          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="currentPage"
            :page-sizes="[10, 20, 50]"
            :page-size="pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total"
            style="margin-top: 10px"
          ></el-pagination>
        </div>
      </el-col>
    </el-row>
    <el-dialog title="角色编辑" :visible.sync="dialogFormVisible" width="500px">
      <el-form
        ref="pojoForm"
        :rules="rules"
        label-width="100px"
        label-position="right"
        :model="pojo"
        style="width: 400px"
        size="mini"
      >
        <el-form-item label="角色名称" prop="roleName">
          <el-input v-model="pojo.roleName" @blur="handleBlur"></el-input>
        </el-form-item>
        <el-form-item label="顺序号" prop="seqNo">
          <el-input v-model="pojo.seqNo" type="number"></el-input>
        </el-form-item>
        <el-form-item label="简拼" prop="py">
          <el-input v-model="pojo.py"></el-input>
        </el-form-item>
        <el-form-item label="备注" prop="note">
          <el-input type="textarea" v-model="pojo.note" :rows="3"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false" size="mini"
          >取 消</el-button
        >
        <el-button
          type="primary"
          @click="
            pojo.roleKey === null ? addData('pojoForm') : updateData('pojoForm')
          "
          size="mini"
          >确 定</el-button
        >
      </div>
    </el-dialog>
    <!-- 弹出新增窗口 -->
    <el-dialog
      title="机构菜单信息"
      :visible.sync="dialogPathFormVisible"
      width="450px"
    >
      <el-form
        ref="pojoPathForm"
        :rules="rules"
        :model="pojo"
        size="mini"
        style="width: 400px"
        class="demo-form-inline"
      >
        <el-form-item prop="pathTree">
          <el-tree
            :data="pathTree"
            show-checkbox
            default-expand-all
            node-key="id"
            ref="tree"
            highlight-current
            :props="defaultProps"
            :check-strictly="checkStrictly"
            style="height: 450px; overflow: auto"
          />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogPathFormVisible = false" size="mini"
          >取 消</el-button
        >
        <el-button
          type="primary"
          @click="updatePathData('pojoPathForm')"
          size="mini"
          >确 定</el-button
        >
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { search as orgSearch, getOrgPathTree } from "@/api/sys/sysHospital";
import {
  search,
  add,
  getById,
  update,
  updateRolePath,
} from "@/api/org/orgRole";
import vPinyin from "@/utils/py";

// 状态类型
const statusOptions = [
  { type: 0, name: "停用" },
  { type: 1, name: "启用" },
];

export default {
  name: "orgRole",
  data() {
    return {
      orgList: [],
      functionList: [],
      orgTotal: 0, // 总记录数
      orgCurrentPage: 1, // 当前页, 默认第1页
      orgPageSize: 10, // 每页显示条数， 10条
      defaultProps: {
        id: "id",
        children: "children",
        label: "name",
        type: "type",
      }, // 树形结构
      pathTree: [],
      checkStrictly: false,
      orgMap: {
        parentOrgKey: "ROOT",
        orgName: "",
        activeFlg: "1",
      }, // 条件查询绑定条件值
      list: [],
      total: 0, // 总记录数
      currentPage: 1, // 当前页, 默认第1页
      pageSize: 10, // 每页显示条数， 10条
      roleMap: {
        orgKey: null,
        roleName: "",
      }, // 条件查询绑定条件值
      statusOptions: statusOptions, // 状态类型
      dialogFormVisible: false, // 控制对话框
      dialogPathFormVisible: false, // 控制菜单对话框
      pojo: {
        roleKey: "",
        orgKey: "",
        roleName: "",
        py: "",
        seqNo: 0,
        note: "",
        sysPageList: [],
      }, // 提交的数据
      rules: {
        // 校验规则
        roleName: [
          {
            required: true,
            message: "角色名称不能为空",
            trigger: "blur",
          },
        ],
      },
    };
  },
  created() {
    this.fetchData();
  },
  methods: {
    // 查询功能
    fetchData() {
      orgSearch(this.orgCurrentPage, this.orgPageSize, this.orgMap).then(
        (response) => {
          const reqs = response;
          this.orgTotal = reqs.data.total;
          this.orgList = reqs.data.rows;
        }
      );
    },
    // 当每页条数改变后触发
    orgHandleSizeChange(val) {
      this.orgPageSize = val;
      this.fetchData();
    },
    // 当页码改变后触发
    orgHandleCurrentChange(val) {
      this.orgCurrentPage = val;
      this.fetchData();
    },
    // 机构选中行触发
    changOrgRows(val) {
      if (val != null) {
        this.roleMap.orgKey = val.orgKey;
        this.pojo.orgKey = val.orgKey;
        this.pathTree = null;
        // 查询机构角色
        this.selectRoleData();
        // 查询机构程序权限
        this.getOrgPathTree(val.orgKey);
      } else {
        this.roleMap.orgKey = null;
        this.pojo.orgKey = null;
        this.total = null;
        this.list = null;
      }
    },
    // 查询机构角色
    selectRoleData() {
      if (this.roleMap.orgKey == null) {
        // 查询失败
        this.$message({ message: "请选择机构信息!", type: "warning" });
      } else {
        search(this.currentPage, this.pageSize, this.roleMap).then(
          (response) => {
            const reqs = response;
            this.total = reqs.data.total;
            this.list = reqs.data.rows;
          }
        );
      }
    },
    // 查询机构程序权限
    getOrgPathTree(orgKey) {
      getOrgPathTree(orgKey).then((response) => {
        const resp = response;
        if (resp.flag) {
          this.pathTree = response.data;
        } else {
          // 查询失败
          this.$message({ message: resp.message, type: "warning" });
        }
      });
    },
    // 新增机构角色
    handleAdd() {
      if (this.roleMap.orgKey == null) {
        // 查询失败
        this.$message({ message: "请选择机构信息!", type: "warning" });
      } else {
        this.dialogFormVisible = true;
        this.$nextTick(() => {
          // 异步事件
          this.$refs["pojoForm"].resetFields();
          this.pojo.roleKey = null;
        });
      }
    },
    // 弹出菜单权限
    handlePagePathAdd() {
      this.dialogPathFormVisible = true;
      this.$nextTick(() => {
        // 异步事件
        this.$refs.tree.setCheckedKeys([]);
      });
    },
    // 生成拼音
    handleBlur() {
      this.pojo.py = vPinyin.getFirstLettersUpper(this.pojo.roleName);
    },
    // 新增数据
    addData(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          add(this.pojo).then((response) => {
            const resp = response;
            if (resp.flag) {
              // 新增成功, 刷新列表数据
              this.selectRoleData();
              this.dialogFormVisible = false; //关闭窗口
              this.$message({ message: resp.message, type: "success" });
            } else {
              // 新增失败
              this.$message({ message: resp.message, type: "warning" });
            }
          });
        } else {
          return false;
        }
      });
    },
    // 更新数据
    updateData(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          update(this.pojo).then((response) => {
            const resp = response;
            if (resp.flag) {
              // 新增成功, 刷新列表数据
              this.selectRoleData();
              this.dialogFormVisible = false; //关闭窗口
              this.$message({ message: resp.message, type: "success" });
            } else {
              this.$message({ message: resp.message, type: "warning" });
              // 更新失败
            }
          });
        } else {
          return false;
        }
      });
    },
    // 打开编辑窗口
    handleEdit(id) {
      this.handleAdd();
      getById(id).then((response) => {
        const resp = response;
        if (resp.flag) {
          this.pojo = resp.data;
          //this.$refs.tree.setCheckedNodes(this.pojo.sysPageList);
        } else {
          this.$message({ message: resp.message, type: "warning" });
        }
      });
    },
    // 重置功能
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
    // 当每页条数改变后触发
    handleSizeChange(val) {
      this.pageSize = val;
      this.selectRoleData();
    },
    // 当页码改变后触发
    handleCurrentChange(val) {
      this.currentPage = val;
      this.selectRoleData();
    },
    // 菜单功能
    handlePagePath(id) {
      this.handlePagePathAdd();
      this.checkStrictly = true;
      getById(id).then((response) => {
        const resp = response;
        if (resp.flag) {
          this.pojo = resp.data;
          this.$refs.tree.setCheckedNodes(this.pojo.sysPageList);
        } else {
          this.$message({ message: resp.message, type: "warning" });
        }
        this.checkStrictly = false;
      });
    },
    // 更新机构程序权限
    updatePathData(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.pojo.sysPageList = this.$refs.tree
            .getCheckedNodes()
            .concat(this.$refs.tree.getHalfCheckedNodes());
          updateRolePath(this.pojo).then((response) => {
            const resp = response;
            if (resp.flag) {
              this.dialogPathFormVisible = false; //关闭窗口
              this.$message({ message: resp.message, type: "success" });
            } else {
              this.$message({ message: resp.message, type: "warning" });
              // 更新失败
            }
          });
        } else {
          return false;
        }
      });
    },
  },
  filters: {
    statusFilter(type) {
      // 全局的 statusOptions , 返回一个满足条件的对象
      const obj = statusOptions.find((obj) => obj.type === type);
      // 非空返回类型名称
      return obj ? obj.name : null;
    },
  },
};
</script>

<style>
</style>